<template>
    <view class="context">
        <view class="close">
            <uv-button @click="close" :customStyle="submitButton" type="primary" text="确定"></uv-button>
        </view>
        <view class="easyinput">
            <uni-easyinput prefixIcon="search" :styles="{ borderColor: '#FD754C', color: '#333', disableColor: '#eee' }"
                placeholder="搜索组织" trim="all" v-model="value" focus @confirm="start"></uni-easyinput>
        </view>
        <view class="scrollview" v-if="!loading">
            <lyTree v-if="treeData.length" :tree-data="treeData" :ready="true" ref="tree" :highlightCurrent="true"
                :showCheckbox="true" :autoExpandParent="false" defaultExpandAll :checkOnlyLeaf="true" node-key="id"
                :expandOnCheckNode="false" :props="{ label: 'name', children: 'children', disabled: 'disabled' }"
                @node-expand="handleNodeExpand" :defaultCheckedKeys="Array.isArray(modelValue) ? modelValue : []"
                @node-click="handleNodeClick" @check="check">
            </lyTree>
        </view>

    </view>
</template>

<script setup lang="ts">
import { ref, onMounted, type StyleValue } from 'vue'
import api from '../../api/index'
import { deepTree } from '../../util/index'
const p = defineProps<{ modelValue: string[] | string, multiple?: boolean }>()
import lyTree from '../ly-tree/ly-tree.vue'
const value = ref<string>('')

const emit = defineEmits(['update:modelValue', 'close'])

const submitButton: StyleValue = {
    background: 'linear-gradient(to right, #FF935B, #FD754C);',
    color: '#ffffff',
    borderWidth: '0px',
    borderColor: 'rgba(0,0,0,0)'
}

const list = ref<Eps.DeptEntity[]>([])

const depts = ref<string[]>([])


const treeData = ref<Eps.DeptEntity[]>([])

const loading = ref(false)


function close() {
    if (p.multiple) {
        emit('update:modelValue', depts.value)
        emit('close', depts.value)
    } else {
        const n = depts.value[0]
        emit('update:modelValue', n)
        emit('close', n)
    }
    
}

function handleNodeClick(obj: any) {
}
function handleNodeExpand(obj: any) {
}

function check(obj: { checked: boolean, data: Eps.DeptEntity }) {
    const { data } = obj
    const t = depts.value.findIndex(c => c === data.id)
    if (t > -1) {
        depts.value.splice(t, 1)
    } else {
        if (p.multiple) {
            depts.value.push(String(data.id))
        } else {
            depts.value = [String(data.id)]
        }
    }

}


function start() {
    loading.value = true
    api<Eps.DeptEntity[]>('/wechat/dept/list', { name: value.value }).then(c => {
        list.value = c
        treeData.value = deepTree(c)
        loading.value = false
    })
}


onMounted(() => {
    start()
    if (Array.isArray(p.modelValue)) {
        depts.value = p.modelValue
    } else {
        if (p.modelValue) {
            depts.value = [p.modelValue]

        } else {
            depts.value = []
        }
    }
})


defineExpose({
    list: list
})

</script>

<style scoped lang="scss">
.context {
    display: flex;
    height: 100%;
    flex-direction: column;
    position: relative;

    .close {
        display: flex;
        flex-wrap: wrap;
        justify-content: flex-end;
        position: fixed;
        bottom: 36px;
        right: 24px;
        z-index: 99;
    }

    .easyinput {
        height: 80rpx;
        padding: 36rpx;
    }

    .scrollview {
        display: flex;
        flex-direction: column;
        padding-left: 36rpx;
        padding-right: 36rpx;
        height: 700rpx;
        overflow-y: scroll;
    }

}
</style>